import React, { memo } from "react";
import { HotRecommendTitle } from "./style";
import { hotRecommends } from "@/services/local-data";
import { NavLink } from "react-router-dom";

export default memo(function HotRecommendT(props) {
  return (
    <HotRecommendTitle>
      <div className="underline sprite_02">
        <NavLink
          to={{
            pathname: "/discover/songs",
          }}
          className="fll-a"
        >
          {props.copywriter}
        </NavLink>
        {props.copywriter == "热门推荐" ? (
          <ul className="hot-select-ul">
            {hotRecommends.map((item, index) => {
              return (
                <li className="hot-select" key={index}>
                  <NavLink
                    to={{
                      pathname: "songs/" + item.title,
                    }}
                  >
                    {item.title}
                    {index !== 4 ? <span>|</span> : ""}
                  </NavLink>
                </li>
              );
            })}
          </ul>
        ) : (
          ""
        )}
        <div className="hot-more sprite_02">
          <NavLink
            to={
              props.copywriter == "热门推荐"
                ? { pathname: "/discover/songs" }
                : props.copywriter == "新碟上架"
                ? { pathname: "/discover/album" }
                : props.copywriter == "榜单"
                ? { pathname: "/discover/ranking" }
                : ""
            }
          >
            更多
          </NavLink>
        </div>
      </div>
    </HotRecommendTitle>
  );
});
